<template>
  <div class="nav-main">
    <canvas
      id="nav-canvas"
      style="position: absolute; top: 180px; left: 0"
    ></canvas>
    <span v-for="nav in navs" :key="nav.id" class="nav-span">
      <a
        class="nav-link"
        :class="{ 'nav-active': nav.path == $route.path }"
        @click="changeRoute(nav)"
      >
        <i :class="`el-icon-${nav.icon} nav-icon`"></i>{{ nav.name }}
      </a>
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import { NavCanvas } from "./nav-canvas";

const activeMenu = ref(0);

const navs = ref([
  {
    index: 0,
    name: "历史数据统计显示",
    path: "/",
  },
  {
    index: 1,
    name: "重过载统计显示",
    path: "/heavyOverload",
  },
  {
    index: 2,
    name: "预警告警统计显示",
    path: "/warningAlert",
  },
]);
const router = useRouter();
const nc = ref(NavCanvas);
const changeRoute = (item) => {
  console.log(item, "router-view");
  activeMenu.value = item.index;
  router.push({ path: item.path });
  nc.value.toggle(item.index);
};
watch(
  () => activeMenu.value,
  (newValue, oldValue) => {
    nextTick(() => {
      nc.value = new NavCanvas("nav-canvas", ".nav-main .nav-span", newValue);
    });
  }
);

// Lifecycle hook
onMounted(() => {
  nextTick(() => {
    nc.value = new NavCanvas(
      "nav-canvas",
      ".nav-main .nav-span",
      activeMenu.value
    );
  });
});
</script>
<style lang="scss" scoped>
.nav-main {
  z-index: 10;
  display: flex;
  width: 100%;
  height: 50px;
  min-width: 1024px;
  user-select: none;
  .nav-span {
    .nav-link {
      transition: color 0.2s;
      text-decoration: none !important;
      display: block;
      color: #fafafa;
      width: auto;
      min-width: 180px;
      line-height: 40px;
      font-size: 20px;
      text-align: left;
      cursor: pointer;
      padding: 0 25px;

      &.nav-active,
      &:hover {
        color: #fff !important;
      }
    }

    .nav-icon {
      padding-right: 5px;
      font-size: 16px;
    }
  }
}
</style>
